<template>
  <s-layout title="我的粉丝" navbar="custom1" color="#333333" :bgStyle="{ color: '#fff' }">
    <!-- 内页导航   -->
    <assNavbar title="我的粉丝" :background="{ BGcolor: '#fff', img: 'none' }"> </assNavbar>
    <!-- 没有粉丝 -->
    <view v-if="state.fansList.length === 0 && !defaultState" class="no-fans">
      <view class="no-fans-img">
        <image
          src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250401/b39bc9894a592d4651d632efd1c84038.png"
          mode="aspectFill" style="width: 100%; height: 100%"></image>
      </view>
      <view class="no-fans-title">还没用户关注你</view>
      <view class="no-fans-desc">赶快去发布精彩内容吸引粉丝吧</view>
    </view>
    <!-- 有粉丝 -->
    <view v-else class="have-fans">
      <view class="fans-header-serach" :style="{ top: sheep.$platform.device.statusBarHeight + 44 + 'px' }">
        <view class="search-box">
          <input type="text" class="search-input" v-model="state.fansParams.key_word" @confirm="handleInputSearch" placeholder="搜索用户昵称" />
          <view class="search-btn" @click="handleInputSearch">搜索</view>
        </view>
      </view>
      <!-- 粉丝列表 -->
      <view class="fans-list-box">
        <view class="fans-list" v-for="(item, index) in state.fansList" :key="item">
          <view class="avatar" @click="jump('/pages/user/userCenter/index?isMe=false&id=' + item.user_id)">
            <image :src="item.avatar
                ? item.avatar
                : 'https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/static/img/default_avatar.png?x-oss-process=image/resize,w_200,h_200'
              " mode="aspectFill" style="width: 100%; height: 100%"></image>
          </view>
          <view class="name" @click="jump('/pages/user/userCenter/index?isMe=false&id=' + item.user_id)">{{ item.nickname || '--' }}</view>
          <view class="status" :class="{ 'no-fans-btn': item.is == 1 }">
            <view class="status-item" @click.stop="onClickFollow(item, index)">
              {{ item.is == 0 ? '关注' : item.is == 1 ? '互相关注' : '错误' }}
            </view>
          </view>

          <!-- <view :class="item.mutual_care == 0 ? 'status no' : 'status'" @click.stop="follow(item.user_id, index)"
          v-if="assUser.mobile === state.mobile">{{
            item.mutual_care == 0 ? '回关' : item.mutual_care == 1 ? '互相关注' : '错误' }}</view> -->
        </view>
      </view>
    </view>

    <uni-load-more
      v-if="state.pagination.total > 0"
      :status="state.loadStatus"
      :content-text="{
        contentdown: '上拉加载更多',
      }"
      @tap="loadmore"
    />

    <s-empty v-if="state.pagination.total === 0 && defaultState" icon="/static/soldout-empty.png" text="暂无粉丝"></s-empty>
  </s-layout>
</template>
<script setup>
  import { ref, reactive, computed } from 'vue';
  import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';

  import sheep from '@/sheep';
  import assNavbar from '@/components/ass-navbar';
  import assApi from '@/association/api';
  import association from '@/association/store';

  // 用户信息
  const userInfo = computed(() => sheep.$store('user').userInfo);
  const assUser = computed(() => association().userInfo);

  const state = reactive({
    fansList: [],
    fansParams: {
      key_word: '',
      page: 1,
      list_rows: 10,
    },
    pagination: {
      current_page: 1,
      last_page: 1,
      total: 0,
    },
    loadStatus: '', // 加载更多状态 ['more' | 'noMore']
  });

    /**
   * @description 区分未传参数时本身数据为 0 和 传参数时本身数据为 0的两种数据页面展示
   * false: 数据为0
   * true: 有数据，但是搜索了，没有数据
   */
   const defaultState = ref(false)

  const resetData = () => {
    state.fansList = []
    state.pagination = {
      current_page: 1,
      last_page: 1,
      total: 0
    }
    state.loadStatus = ''
  }

  const onClickFollow = async (item, index) => {
    console.log(item, 'item');
    console.log(index, 'index');

    state.fansList[index].is = !item.is;
    let res = await assApi.user.follow({ user_id: item.user_id });
    console.log(res, 'res 点关注了');
  };

  // 搜索框
  const handleInputSearch = () => {
    console.log('搜索输入值=');
    resetData()
    getFansList()
  };

  const getFansList = async () => {
    try {
      let fansList = await assApi.info.getFansList(state.fansParams);

      console.log(fansList, 'fansList');
      const { current_page, last_page, total } = fansList.data

      if (total === 0 && state.fansParams.key_word === '') {
        defaultState.value = false
      } else {
        defaultState.value = true
      }
      
      console.log(current_page, 'current_page')
      if (current_page === 1) {
        state.fansList = fansList.data?.data || [];
      } else {
        state.fansList = [...state.fansList, ...fansList.data?.data]
      }

      Object.assign(state.pagination, { total, current_page, last_page })

      if (state.pagination.current_page < state.pagination.last_page) {
        state.loadStatus = 'more';
      } else {
        state.loadStatus = 'noMore';
      }

      console.log(state.fansList, 'state.fansList')
      return fansList.data?.data
    } catch(error) {
      throw error
    }
  };

  const loadmore = () => {
    if (state.loadStatus !== 'noMore') {
      state.pagination.current_page ++ 
      state.fansParams.page ++ 
      getFansList()
    }
  }

  onLoad(async (options) => {
    getFansList()
  });
  onShow(async () => {
    resetData()
    getFansList()
  });
  onReachBottom(() => {
    console.log('触底了。')
    loadmore()
  });

  const follow = async (id, index) => {
    let res = await assApi.info.operate({
      be_user_id: id,
    });
    state.fansList[index].mutual_care = res.data.is_care;
  };

  const jump = (url) => {
    sheep.$router.go(url);
  };
</script>
<style lang="scss" scoped>
 @import './style/follow.scss';
</style>
